<template>
  <view class="intercom-page">
    <!-- 固定导航栏 -->
    <view class="custom-nav-bar" :style="{ height: navBarHeight + 'px' }">
      <!-- 状态栏占位 -->
      <view :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏内容 -->
      <view class="nav-content" :style="{ height: navBarContentHeight + 'px' }">
        <!-- 返回键 -->
        <view class="back-wrapper" @click="goBack">
          <image class="nav-icon" src="/static/right.png" style="transform: rotate(180deg);" />
        </view>
        <!-- 标题 -->
        <text class="nav-title">语音对讲</text>
        <!-- 占位符保持对称 -->
        <view class="placeholder"></view>
      </view>
    </view>

    <!-- 中央大图标区域 -->
    <view class="icon-container" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 通话图标动画 -->
      <view class="phone-animation">
        <!-- 最外层圆弧 -->
        <image class="phone-arc phone-arc-3" src="/static/phone(4).png" mode="aspectFit"></image>
        <!-- 中间层圆弧 -->
        <image class="phone-arc phone-arc-2" src="/static/phone(3).png" mode="aspectFit"></image>
        <!-- 内层圆弧 -->
        <image class="phone-arc phone-arc-1" src="/static/phone(2).png" mode="aspectFit"></image>
        <!-- 中心电话图标 -->
        <image class="phone-center" src="/static/phone(1).png" mode="aspectFit"></image>
      </view>
    </view>

    <view class="status">
      呼叫中...
    </view>

    <!-- 底部挂断按钮 -->
    <view class="bottom-section">
      <button class="hangup-btn" @click="handleHangup">挂断</button>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    createMessage
  } from '../../utils/websocketMessages.js'

  // 导航栏高度相关变量
  const statusBarHeight = ref(0)
  const navBarContentHeight = ref(44)
  const navBarHeight = ref(0)

  // WebSocket实例（从全局获取）
  let sseClient = null

  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };

  // 计算导航栏高度
  onMounted(() => {
    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight || systemInfo.safeAreaInsets?.top || 20
    navBarHeight.value = statusBarHeight.value + navBarContentHeight.value
  });

  // 页面加载时获取全局WebSocket实例并发送发起语音对讲消息
  onLoad(() => {
    // 从全局数据获取WebSocket实例
    try {
      const app = getApp();
      if (app && app.globalData && app.globalData.sseClient) {
        sseClient = app.globalData.sseClient;
        console.log('已获取全局WebSocket实例');

        // 发送发起语音对讲消息
        if (sseClient.isConnected) {
          const startMessage = createMessage('START');
          sseClient.send(startMessage);
          // console.log('已发送发起语音对讲消息到服务端:', startMessage);
        }
      } else {
        console.log('全局WebSocket实例不存在');
      }
    } catch (e) {
      console.log('获取全局WebSocket实例失败:', e);
    }
  });

  // 挂断处理函数
  const handleHangup = () => {
    uni.showModal({
      title: '确认挂断',
      content: '确定要结束当前通话吗？',
      confirmText: '确定',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 执行挂断逻辑
          console.log('执行挂断操作');

          // 发送挂断消息到服务端
          if (sseClient && sseClient.isConnected) {
            const hangupMessage = createMessage('HANGUP');
            sseClient.send(hangupMessage);
            // console.log('已发送挂断消息到服务端:', hangupMessage);
          }

          uni.showToast({
            title: '通话已结束',
            icon: 'success',
            duration: 2000
          });

          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        }
      }
    });
  };
</script>

<style scoped>
  .intercom-page {
    width: 100%;
    min-height: 100vh;
    background-color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  /* 固定导航栏样式 */
  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    z-index: 999;
  }

  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 24rpx;
    box-sizing: border-box;
  }

  .nav-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    padding-bottom: 2px;
  }

  .nav-icon {
    width: 72rpx;
    height: 72rpx;
    cursor: pointer;
  }

  /* 返回键样式 */
  .back-wrapper {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .placeholder {
    width: 72rpx;
    height: 72rpx;
  }

  /* 中央图标容器 */
  .icon-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40rpx 0;
    min-height: 0;
  }

  /* 通话图标动画容器 */
  .phone-animation {
    position: relative;
    width: 720rpx;
    height: 720rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 圆弧样式 */
  .phone-arc {
    position: absolute;
    opacity: 0;
    animation: arcAppear 2s ease-in-out infinite;
  }

  /* 圆弧出现动画 - 按照大小分层，增加间距 */
  .phone-arc-1 {
    /* 内层圆弧 - 最小 */
    left: 320rpx;
    width: 80rpx;
    height: 80rpx;
    animation-delay: 0s;
  }

  .phone-arc-2 {
    /* 中间层圆弧 - 中等 */
    left: 340rpx;
    top: 280rpx;
    width: 120rpx;
    height: 120rpx;
    animation-delay: 0.5s;
  }

  .phone-arc-3 {
    /* 最外层圆弧 - 最大 */
    left: 360rpx;
    top: 240rpx;
    width: 160rpx;
    height: 160rpx;
    animation-delay: 1s;
  }

  @keyframes arcAppear {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }

    20% {
      opacity: 0.3;
      transform: scale(0.8);
    }

    50% {
      opacity: 1;
      transform: scale(1);
    }

    80% {
      opacity: 0.7;
      transform: scale(1.1);
    }

    100% {
      opacity: 0.4;
      transform: scale(1.2);
    }
  }

  /* 中心电话图标 */
  .phone-center {
    width: 280rpx;
    height: 280rpx;
    animation: phoneShake 2s ease-in-out infinite;
    z-index: 10;
  }

  /* 电话摇晃动画 */
  @keyframes phoneShake {

    0%,
    100% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(-2deg);
    }

    75% {
      transform: rotate(2deg);
    }
  }

  /* 底部区域 */
  .bottom-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx 20rpx;
    margin-top: auto;
    flex-shrink: 0;
  }

  .status {
    color: #fff;
    font-size: 36rpx;
    border: 1;
  }

  /* 挂断按钮样式 */
  .hangup-btn {
    width: 100%;
    height: 100rpx;
    background-color: #ff4444;
    color: #fff;
    border: none;
    font-size: 36rpx;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(255, 68, 68, 0.3);
    transition: all 0.3s ease;
  }

  .hangup-btn:active {
    transform: scale(0.95);
    background-color: #ff3333;
    box-shadow: 0 2rpx 10rpx rgba(255, 68, 68, 0.4);
  }
</style>